 <template>
   <div class="mainContent"> 
    <div class="top"><img src="../../../../public/logo.png" alt=""></div>
    <main>
      <ul>
        <li>
          <router-link to="/">商品</router-link>
        </li>
        <li>
          <router-link to="/shangjia">商家</router-link>
        </li>
        <li>
          <router-link to="/pingjia">评价</router-link>
        </li>
      </ul> 
   
    <div class="content">
      <router-view></router-view>
    </div> 
    </main>
    <footer>
      <div class="left"></div>
       <div class="right">20￥</div>
    </footer>
  </div>

</template>
  
<script>
export default {
  data() {
    return {
    }
  },
  
}
</script>
  
<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100rem;
}
img{
  height: 100%;
  width: 100%;

}

a {
  text-decoration: none;
}

ul,
li,
ol {
  list-style: none;
}

.mainContent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-around;
}

.top {
  height: 6.25rem;
  background-color: bisque;
}

main {
  flex-grow: 1;
  /* overflow: auto; */
  /* overflow: scroll; */
  display: flex;
  flex-direction: column;
  /* background-color: gainsboro; */
}

footer {
  height: 5rem;
  display: flex;
  background-color: darksalmon;
}

ul {
  display: flex;
  height: 3.125rem;
  line-height: 3.125rem;
  background-color: skyblue;
  font-size: 1.25rem;
  justify-content: space-around;
}
ul li a {
  color: black;
}

ul>li:hover a {
  color: red;
  border-bottom: 2px solid red;
}
.content {
  background: green;
  flex: 1;
  box-sizing: border-box;
   /* overflow: scroll; */
}
.right{
  width: 4rem;
}
.left{
  flex: 1;
}
</style> 

